<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h1>46-插槽-作用域插槽-场景</h1>
    <MyTable :list="list">
      <!-- scope是一个变量名，自动接收slot上的自定义属性 -->
      <template v-slot:img="scope">
        <img style="display:block;border-radius:50%" :src="scope.img" />
        <button @click="like(scope)">点赞</button>
        <button>加好友</button>
      </template>
    </MyTable>
  </div>
</template>

<script>

import MyTable from './MyTable.vue'
export default {
  data(){
    return {
      list: [
          {
            name: "小传同学",
            age: 18,
            headImgUrl:
            "https://www.escook.cn/vuebase/pics/1.png",
          },
          {
            name: "小黑同学",
            age: 25,
            headImgUrl:
            "https://www.escook.cn/vuebase/pics/2.png",
          },
          {
            name: "智慧同学",
            age: 21,
            headImgUrl:
            "https://www.escook.cn/vuebase/pics/3.png",
          }
        ]
    }
  },
  methods: {
    like(obj){
      console.log(obj)
    }
  },
  components: { MyTable }
}
</script>

<style scoped>
.content{
background-color: #ccc;
}
</style>